<script setup lang="ts">
import { find } from "lodash";
import { ref } from "vue";
import { LMarker, LPopup } from "@vue-leaflet/vue-leaflet";
import { useMapStore } from "@/store";
import { useLocalStore } from "../../../store/index";
import { MAP_ACTION } from "@/views/pipe-network/constants";
import { deletePoint, queryPoints } from "@/api/pipe";
import LMarkerClusterGroup from "../MarkerCluster/index.vue";
import "vue-leaflet-markercluster/dist/style.css";
import { getAssetsFile } from "@/utils/map";
import DangerAPI from "@/api/DangerAPI";
const { L }: any = window;
const props = defineProps({
  deviceCategoryList: Array<any>,
  dangerData: Array<any>,
});
const dangerDataList = ref(props.dangerData);
// 弹窗对象
const dialog = reactive({
  visible: false,
  title: "",
});
const pointListRef = ref([]);
const mapStore = useMapStore();
const { mapAction } = storeToRefs(mapStore);
const localStore = useLocalStore();
const { markerClusterFlag, visiblePointClassIds } = storeToRefs(localStore);
const mck = ref(0);
const onClick = (e: any) => {
  // const isConnectionTwoPointsAction =
  //   mapAction.value === MAP_ACTION.CONNECTION_POINT_TWO;
  // const isModifyInfoAction = mapAction.value === MAP_ACTION.EDIT;
  // if (isConnectionTwoPointsAction) {
  //   mapStore.addSelectedMarkers(e.latlng);
  // }
  // if (isModifyInfoAction) {
  //   const { pointId } = e.target.options.attribution;
  //   const obj = pointListRef.value.find(
  //     (item: any) => item.pointId === pointId
  //   );
  //   if (obj) {
  //     mapStore.setEditingPipePoint(obj);
  //   }
  // }
  console.log(e);
  dialog.visible = true;
  alert(111);
};

// 隐患图片
const dangerLevel1 = ref(
  new URL(`../../../assets/device/point-2.png`, import.meta.url).href
);
const dangerLevel2 = ref(
  new URL(`../../../assets/device/point-2.png`, import.meta.url).href
);
const dangerLevel3 = ref(
  new URL(`../../../assets/device/point-3.png`, import.meta.url).href
);

const getAllPoints = () => {
  DangerAPI.api_query({ pageSize: 100000, pageIndex: 1, isPublish: true }).then(
    ({ data, errors, succeeded }) => {
      if (succeeded && Array.isArray(data?.items)) {
        pointListRef.value = data.items.map((item) => {
          const { coordinates } = JSON.parse(item.jsonPoint);
          item.checked = true;
          return {
            ...item,
            latlng: [coordinates[1], coordinates[0]],
            icon: getIcon(item.status),
          };
        });
      }
    }
  );
};
const getIcon = (status: number) => {
  const iconUrl = getAssetsFile(
    "device/point-" + (status == 0 ? 2 : 3) + ".png"
  );
  return L.icon({
    iconUrl,
    iconSize: [32, 32],
    iconAnchor: [16, 27],
  });
};
function f_GetWarningHtml(dangerId) {
  let data = find(pointListRef.value, { dangerId: dangerId });
  let str =
    '<div style="width: 220px;">' +
    '<div style="border-top-left-radius: 11px;border-top-right-radius: 11px;height: 32px;line-height: 32px;color: #fff;text-align: center;background: ' +
    (data.status != 0 ? "red" : "#FFC107") +
    '">隐患详情</div>' +
    '<p style="margin: 10px;white-space: pre-wrap;word-wrap:break-word;"><span style="font-weight: bold;">管点编号：</span>' +
    data.pointGisNo +
    "</p>" +
    '<p style="margin: 10px;white-space: pre-wrap;word-wrap:break-word;"><span style="font-weight: bold;">巡检人员：</span>' +
    data.creater +
    "</p>" +
    '<p style="margin: 10px;white-space: pre-wrap;word-wrap:break-word;"><span style="font-weight: bold;">地址：</span>' +
    data.address +
    "</p>" +
    '<p style="margin: 10px;white-space: pre-wrap;word-wrap:break-word;"><span style="font-weight: bold;">发现隐患时间：</span>' +
    data.createTime +
    "</p>" +
    '<p style="margin: 10px; white-space: pre-wrap;word-wrap:break-word;"><span style="font-weight: bold;">隐患名称：</span>' +
    data.dangerName +
    "</p>" +
    '<p style="margin: 10px; white-space: pre-wrap;word-wrap:break-word;"><span style="font-weight: bold;">隐患描述：</span>' +
    data.dangerContent +
    "</p>" +
    '<p style="margin: 10px;"><span style="font-weight: bold;">隐患等级：</span>' +
    '<span style="color:' +
    (data.level == 1 ? "red" : data.level == 2 ? "yellow" : "") +
    '">' +
    (data.level == 1 ? "高" : data.level == 2 ? "中" : "低") +
    "</span>" +
    "</p>" +
    '<p style="margin: 10px;"><span style="font-weight: bold;">是否转工单：</span>' +
    "-" +
    "</p>" +
    '<p style="margin: 10px;white-space: pre-wrap;word-wrap:break-word;"><span style="font-weight: bold;">处理人员：</span>' +
    (data.handler ? data.handler : "") +
    "</p>" +
    '<p style="margin: 10px;white-space: pre-wrap;word-wrap:break-word;"><span style="font-weight: bold;">联系电话：</span>' +
    (data.handlerTel ? data.handlerTel : "") +
    "</p>" +
    "</div>";
  return str;
}
onMounted(() => getAllPoints());
watchEffect(() => {
  dangerDataList.value = props.dangerData;
  pointListRef.value.forEach((item, index) => {
    if (
      !find(dangerDataList.value, {
        dangerId: item.dangerId,
      })
    ) {
      pointListRef.value[index].checked = false;
    } else {
      let isChecked = find(dangerDataList.value, {
        dangerId: item.dangerId,
      }).checked;
      pointListRef.value[index].checked = isChecked;
    }
  });
  // console.log(pointListRef.value);
  // getAllPoints();
  // debugger;
  // console.log(dangerDataList.value);
  // if (Array.isArray(visiblePointClassIds.value)) {
  //   pointListRef.value.forEach((item: any) => {
  //     item.visible = visiblePointClassIds.value.includes(item.classId);
  //   });
  //   mck.value = pointListRef.value.filter(
  //     (item: any) => item.visible !== false
  //   );
  // } else {
  //   pointListRef.value.forEach((item: any) => {
  //     item.visible = true;
  //   });
  //   mck.value = 0;
  // }
});
</script>

<template v-if="positionRef">
  <LMarker
    :key="dangerId"
    v-for="{ latlng, dangerId, status, checked } in pointListRef.filter(
      (item: any) => item.checked !== false
    )"
    :lat-lng="latlng"
    :icon="getIcon(status)"
    :visible="checked"
  >
    <LPopup :content="f_GetWarningHtml(dangerId)" />
  </LMarker>
</template>

<style scoped lang="scss">
.danger-detail {
  color: red;
  width: 120px;
  height: 200px;
  .title {
    height: 32px;
    line-height: 32px;
    text-align: center;
    color: red;
  }
  p {
    height: 24px;
    line-height: 24px;
    span {
      font-weight: bold;
    }
  }
}
</style>
